<template>
  <div class="container">
    <ul class="header">
      <li @click="gotoback">继续选号</li>
      <li @click="handADD(caizhongname)">机选1注</li>
    </ul>
    <div class="money">
      <span>{{linelist ||0}}注</span>共
      <span>
        <i style="color:#F84848; font-style: normal;">{{moneyList||0}}</i>元
      </span>
    </div>

    <!-- 双色球 -->
    <template v-if="pathNum=='01'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.changeRedList" >{{item}}</li>
            <li class="BlueColor" v-for="(item,index) in item.changeBlueList" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>

            <li v-for="(item,index) in item.BlueARR"  class="BlueColor">{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum || 1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money || 2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>
    <!-- 福彩3D -->
    <template v-if="pathNum=='03'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.thousand" >{{item}}</li>
            <li v-for="(item,index) in item.Tenthousand" >{{item}}</li>
            <li v-for="(item,index) in item.hundred" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money ||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <!-- 大乐透 -->
    <template v-if="pathNum=='50'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.Redlist" >{{item}}</li>
            <li class="BlueColor" v-for="(item,index) in item.BlueList" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>
            <li v-for="(item,index) in item.BlueARR"  class="BlueColor">{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money ||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <!-- 排列3 -->
    <template v-if="pathNum=='53'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.thousand" >{{item}}</li>
            <li v-for="(item,index) in item.Tenthousand" >{{item}}</li>
            <li v-for="(item,index) in item.hundred" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money ||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <!-- 排列五 -->
    <template v-if="pathNum=='52'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.thousand" >{{item}}</li>
            <li v-for="(item,index) in item.Tenthousand" >{{item}}</li>
            <li v-for="(item,index) in item.hundred" >{{item}}</li>
            <li v-for="(item,index) in item.fourand" >{{item}}</li>
            <li v-for="(item,index) in item.fiveand" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money ||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <!-- 七星彩 -->
    <template v-if="pathNum=='51'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.thousand" >{{item}}</li>
            <li v-for="(item,index) in item.Tenthousand" >{{item}}</li>
            <li v-for="(item,index) in item.hundred" >{{item}}</li>
            <li v-for="(item,index) in item.fourand" >{{item}}</li>
            <li v-for="(item,index) in item.fiveand" >{{item}}</li>
            <li v-for="(item,index) in item.sixand" >{{item}}</li>
            <li v-for="(item,index) in item.sevenand" >{{item}}</li>

            <li v-for="(item,index) in item.suiji" >{{item}}</li>
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1 }}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money ||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <!-- 七乐彩 -->
    <template v-if="pathNum=='07'">
      <ul class="containir_box">
        <li v-for="(item,index) in this.list" >
          <ul class="container_ball">
            <li v-for="(item,index) in item.Tenthousand" >{{item}}</li>
            <li v-for="(item,index) in item.changeBlueList"  class="BlueColor">{{item}}</li>
            <li v-for="(item,index) in item.suiji" >{{item}}</li>
            <!-- <li v-for="(item,index) in item.BlueARR"  class="BlueColor">{{item}}</li> -->
          </ul>
          <div class="contaer_box_list">
            <span>
              <span v-if="item.paynum==1">单式</span>
              <span v-else-if="item.paynum>1">复式</span>
              投注 {{item.paynum ||1}}注:
            </span>
            <i style="color:#F84848; margin:0 .02rem">{{item.money||2}}</i>元
          </div>
          <div class="Xbutton">
            <img src="../../../assets/details/编组.png" @click="handMove(index)" />
          </div>
        </li>
      </ul>
    </template>

    <div v-if='isShowbu==1' class="bottom" @click="handgomoney">下载APP去投注</div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { getAdvertiSense } from "@/api/whole";
Vue.use(Toast);
export default {
  name: "App",
  data() {
    return {
      // 双色球 大乐透 福彩3D 排列3 排列5 七星彩 七乐彩
      list: ["01", "50", "03", "53", "52", "51", "07"],
      pathNum: "",
      list: [],
      linelist: 0,
      moneyList: 0,
      newObj: {},
      newArr: [],
      blueArr: [],
      caizhongname: "",
      a: "",
      isShowbu:''
    };
  },
  created() {
    this.pathNum = this.$router.currentRoute.path.split("/")[
      this.$router.currentRoute.path.split("/").length - 1
    ];
    if (this.pathNum == "01") {
      this.caizhongname = "twoball";
      this.list = JSON.parse(window.localStorage.getItem("twoball"));
    } else if (this.pathNum == "50") {
      this.caizhongname = "bigball";
      this.list = JSON.parse(window.localStorage.getItem("bigball"));
    } else if (this.pathNum == "03") {
      this.caizhongname = "fucai3D";
      this.list = JSON.parse(window.localStorage.getItem("fucai3D"));
    } else if (this.pathNum == "53") {
      this.caizhongname = "Threeline";
      this.list = JSON.parse(window.localStorage.getItem("Threeline"));
    } else if (this.pathNum == "52") {
      this.caizhongname = "Fiveline";
      this.list = JSON.parse(window.localStorage.getItem("Fiveline"));
    } else if (this.pathNum == "51") {
      this.caizhongname = "sevenStare";
      this.list = JSON.parse(window.localStorage.getItem("sevenStare"));
    } else if (this.pathNum == "07") {
      this.caizhongname = "sevenBall";
      this.list = JSON.parse(window.localStorage.getItem("sevenBall"));
    }

    for (var i = 0; i < this.list.length; i++) {
      this.linelist += parseInt(this.list[i].paynum);
      this.moneyList += parseInt(this.list[i].money);
    }

    //调用接口是否是敏感地区
    this.getAdvertiSense()
  },

  methods: {
    //生成随机数
    Random(count) {
      var original = new Array; //原始数组
      //给原始数组original赋值
      for(var i = 0; i < count; i++) {
        original[i] = i + 1;
      }
      original.sort(function() {
        return 0.5 - Math.random();
      });
      var arrayList = new Array();
      for(var i = 0; i < count; i++) {
        arrayList[i] = original[i];
      }
      return arrayList;
    },
    //数组排序 升序
    sortIntArrayAsc(a, b) {
      if(isNaN(a) || isNaN(b)) return a.localeCompare(b);
      else return parseInt(a) - parseInt(b);
    },
    machineRandom(redMax,redLen,blueMax,blueLen,isNum){
      let t = this;
      var rednumber = t.Random(redMax),bluenumber = blueMax!=0?t.Random(blueMax):[];
      if (isNum) {
        rednumber = rednumber.slice(0,redLen).map(item=>{
          if (item < 10) {
            return '0'+item
          }else{
            return item
          }
        })
        rednumber.sort(t.sortIntArrayAsc);
        if (blueMax!=0) {
          bluenumber = bluenumber.slice(0,blueLen).map(item=>{
            if (item < 10) {
              return '0'+item
            }else{
              return item
            }
          })
        }
        bluenumber.sort(t.sortIntArrayAsc);
        return {
          rednumber,
          bluenumber
        }
      }else{
        return{
          rednumber
        }
      }
     
      

    },
    getAdvertiSense() {
      getAdvertiSense({
        cfrom: "h5",
        position:this.pathNum
      }).then(res => {
        this.isShowbu = res.data.isShow;
      });
    },
    gotoback() {
      this.$router.back(-1);
    },
    handgomoney() {
      window.location.href = "http://h.5106cai.com/czbdown/down.html";
    },

    handMove(index) {
      // 显示取消
      this.list.splice(index, 1);
      // 未添加 随机选择的计算 额度
      this.linelist -= JSON.parse(
        window.localStorage.getItem(this.caizhongname)
      )[index].paynum;

      this.moneyList -= JSON.parse(
        window.localStorage.getItem(this.caizhongname)
      )[index].money;

      //在对应的STROE里面进行删除
      if (this.pathNum == "01") {
        this.$store.state.twoball.splice(index, 0);
      } else if (this.pathNum == "50") {
        this.$store.state.bigball.splice(index, 0);
      } else if (this.pathNum == "03") {
        this.$store.state.fucai3D.splice(index, 0);
      } else if (this.pathNum == "53") {
        this.$store.state.Threeline.splice(index, 0);
      } else if (this.pathNum == "52") {
        this.$store.state.Fiveline.splice(index, 0);
      } else if (this.pathNum == "51") {
        this.$store.state.sevenStare.splice(index, 0);
      } else if (this.pathNum == "07") {
        this.$store.state.sevenBall.splice(index, 0);
      }

      window.localStorage.setItem(this.caizhongname, JSON.stringify(this.list));
    },

    handADD(name) {
      if (this.newArr.length != 0) {
        Toast("只能帮你选择一个您满意的彩注");
        return;
      }
      this.linelist++;
      this.moneyList += 2;
      let machineRandom = this.machineRandom;
      // 创建随机数
      if (this.pathNum == "01") {
          let arr = machineRandom(33,6,16,1,1);
          this.newArr = arr.rednumber;
          this.blueArr = arr.bluenumber;
      }
      if (this.pathNum == "50") {
         let arr = machineRandom(35,5,12,2,1);
          this.newArr = arr.rednumber;
          this.blueArr = arr.bluenumber;
      }
      if (this.pathNum == "03") {
        for (var i = 0; i < 3; i++) {
          this.newArr.push(parseInt(Math.random() * 9 + 1));
        }
      }
      if (this.pathNum == "53") {
        for (var i = 0; i < 3; i++) {
          this.newArr.push(parseInt(Math.random() * 9 + 1));
        }
      }
      if (this.pathNum == "52") {
        for (var i = 0; i < 5; i++) {
          this.newArr.push(parseInt(Math.random() * 9 + 1));
        }
      }
      if (this.pathNum == "51") {
        for (var i = 0; i < 7; i++) {
          this.newArr.push(parseInt(Math.random() * 9 + 1));
        }
      }
      if (this.pathNum == "07") {
        let arr = machineRandom(30,7,0,0,1);
        this.newArr = arr.rednumber;
      }

      this.newObj.suiji = this.newArr;
      this.newObj.BlueARR = this.blueArr;

      this.newObj.paynum = 1;
      this.newObj.money = 2;

      this.list.push(this.newObj);
      if (name == "bigball") {
        this.$store.state.bigball = this.list;
      } else if (name == "twoball") {
        this.$store.state.twoball = this.list;
      } else if (name == "fucai3D") {
        this.$store.state.fucai3D = this.list;
      } else if (name == "Threeline") {
        this.$store.state.Threeline = this.list;
      } else if (name == "Fiveline") {
        this.$store.state.Fiveline = this.list;
      } else if (name == "sevenStare") {
        this.$store.state.sevenStare = this.list;
      } else if (name == "sevenBall") {
        this.$store.state.sevenBall = this.list;
      }

      window.localStorage.setItem(name, JSON.stringify(this.list));
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  color: #f1f2f6;
  font-size: 0.12rem;
}
.header {
  height: 0.6rem;
  display: flex;
}
.header li {
  width: 50%;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.15rem;
  color: #fff;
  background: #f84848;
  box-shadow: 0.9px 0.9px 0.9px 0.9px #bdbdbd;
}
.money {
  margin: 0.1rem 0;
  width: 100%;
  justify-items: center;
  align-content: center;
  font-size: 0.16rem;
  color: #9a9a9a;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02rem;
}
.containir_box {
  margin: 0 0.15rem;
  padding-bottom: 0.4rem;
}
.containir_box li {
  border-radius: 0.07rem;
  background: #f1f2f6;
  padding: 0.1rem;
  box-sizing: border-box;
  position: relative;
  margin: 0.1rem 0;
}
.container_ball {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  margin: 0.05rem 0;
}
.Xbutton {
  position: absolute;
  right: 0.15rem;
  top: 0.15rem;
}
.container_ball li {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #f84848;
  line-height: 0.3rem;
  padding: 0;
  text-align: center;
  margin: 0 0.01rem;
  font-size: 0.12rem;
}
.contaer_box_list {
  margin: 0.05rem 0;
  color: #666666;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f84848;
  color: #ffffff;
  font-size: 0.15rem;
  height: 0.4rem;
  border-radius: 0.08rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.BlueColor {
  background: #5187ff !important;
}
</style>